@charset "UTF-8";
@import "reset";
@import "common";
.web {
    header {
        width: vw(706px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: vw(16px) 0 vw(10px);
        .top_box {
            width: vw(120px);
            height: vw(40px);
            text-align: center;
            line-height: vw(40px);
            border-radius: vw(16px);
            border: 2px solid $index_color;
        }
        .city_box {
            width: vw(166px);
            height:vw(55px) ;
            line-height:vw(50px) ;
            border: vw(3px) solid $index-color;
            box-sizing: border-box;
            padding-left:vw(14px);
            position:relative;
            select {
                width:90%;
                height: 80%;
                border:0;
                outline: none;
                -webkit-appearance: none;
                font-size: vw(26px);
            }
            &::after {
                content: "";
                border-left:vw(10px)solid transparent ;
                border-right:vw(10px) solid transparent ;
                border-top:vw(10px) solid $index-color ;
                border-bottom:vw(10px) solid transparent ;
                position: absolute;
                top: 50%;
                right: vw(20px);
                transform: translateY(-25%);
            }
            }
    }
    section {
        position: absolute;
        left: 0;
        width: 100%;
        top: vw(70px);
        bottom: vw(135px);
        overflow-y: auto;
        .kv {
            width: 90%;
            height: vw(250px);
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            text-align: center;
            justify-content: space-around;
            .kv_img {
                width: vw(150px);
                height: vw(150px);
                img {
                    width: 100%;
                    height: vw(150px);
                    border-radius: 50%;
                }
            }
        }
        .meishi{
        width: 90%;
        display: flex;
        margin: 0 auto;
        padding-top: vw(20px);
        justify-content: space-between;
        .you_left {
            justify-content: flex-start;
            i {
//              color: $index_color;
                font-size: vw(48px);
            }
            span {
                font-size: vw(38px);
            }
        }
        .you_right {
            justify-content: flex-end;
            i {
                color: $index_color;
                font-size: vw(38px);
            }
            p {
                font-size: vw(38px);
            }
        }
    
        }
        .meishi_tu{
            width: 90%;
            height: vw(200px);
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
//          text-align: center;
            justify-content: space-around;
            .meishi_img {
                width: vw(130px);
                height: vw(150px);
                img {
                    width: 100%;
                    height: vw(150px);
                }
            }
        
        }
    }
}